<template>
	<view class="xzw_notice" :style="{color:getColor(theme),backgroundColor:getBgColor(theme)}">
		<!-- <uni-icons v-if="showIcon === true || showIcon === 'true'" class="notice_left" type="sound"
			:color="getColor(theme)" size="22" /> -->
		<image src="@/static/images/index/lb.png" mode="" class="notice_left"
			v-if="showIcon === true || showIcon === 'true'"></image>
		<!-- 垂直滚动用到轮播组件 -->
		<swiper class="notice_center" vertical v-if="direction=='column'" :autoplay="true"
			:interval="speed=='fast'?4000:speed=='normal'?6000:10000" :duration="500" :circular="true" disable-touch>
			<swiper-item v-for="(item, index) in list" :key="index" class="swiperIn" @click="goItem(item)">
				<view>{{item[theKey]}}</view>
			</swiper-item>
		</swiper>
		<!-- 水平滚动取第一条公告 -->
		<view class="notice_center2" v-else>
			<view :class="speed">{{list[rowIndex][theKey]}}</view>
		</view>
		<view class="notice_right" v-if="showMore">
			<view @click="goMore">更多</view>
		</view>
		<!-- 分享 -->
		<u-popup :show="showDetail">
			<image class="buyimg" src="@/static/images/index/find.png" mode=""></image>
			<view class="cu-dialog" @tap.stop="">
				<image class="close" @click="handclose" src="@/static/images/index/close.png" mode=""></image>
				<view class="buybox">
					<view class="title">{{noticeDatail.title}}</view>
					<view class="content" v-html="noticeDatail.content">
					</view>
					<view class="pays" @click="handclose">我知道了</view>
				</view>
			</view>
			<!-- #ifdef APP -->
			<view class="fillbox" style="height: 120rpx;"></view>
			<!-- #endif -->
		</u-popup>
	</view>
</template>
<script>
	export default {
		name: "xzw-notice",
		props: {
			//主题色,default|primary|error|warning|success|info
			theme: {
				type: String,
				default: 'default'
			},
			// 是否显示左侧icon
			showIcon: {
				type: [Boolean, String],
				default: true
			},
			// 是否显示更多
			showMore: {
				type: [Boolean, String],
				default: true
			},
			//公告数组，必须是二维数组
			list: {
				type: Array,
				default () {
					return []
				}
			},
			//公告数组的键名
			theKey: {
				type: String,
				default: 'title'
			},
			//方向，column垂直，row水平时取第一条公告
			direction: {
				type: String,
				default: 'column'
			},
			//滚动速度，快fast，慢slow，默认normal
			speed: {
				type: String,
				default: 'normal'
			}
		},
		data() {
			return {
				rowIndex: 0,
				showDetail:false,
				noticeDatail:{
					title:'',
					content:''
				}
			}
		},
		methods: {
			getColor(theme) {
				if (theme == "primary") {
					return "#2979FF"
				} else if (theme == "error") {
					return "#FA3534"
				} else if (theme == "warning") {
					return "#FF9A43"
				} else if (theme == "success") {
					return "#1BBF6C"
				} else if (theme == "info") {
					return "#909399"
				}  else if (theme == "transparent") {
					return "#666666"
				}else {
					return "#303133"
				}
			},
			getBgColor(theme) {
				if (theme == "primary") {
					return "#ECF5FF"
				} else if (theme == "error") {
					return "#FEF0F0"
				} else if (theme == "warning") {
					return "#FDF6EC"
				} else if (theme == "success") {
					return "#DBF1E1"
				} else if (theme == "info") {
					return "#F4F4F5"
				}  else if (theme == "transparent") {
					return "transparent"
				} else {
					return "#FFFFFF"
				}
			},
			// 点击公告
			goItem(item) {
				this.$emit('goItem', item)
				if(item.content){
					this.showDetail = true
					this.noticeDatail= item
				}
			},
			handclose() {
				this.showDetail = false;
			},
			//点击更多
			goMore() {
				// this.$emit('goMore')
				this.showDetail = true
			}
		},
		created() {
			if (this.direction == "row") {
				let time = this.speed == "fast" ? 4000 : this.speed == "normal" ? 6000 : 10000
				setInterval(() => {
					if (this.rowIndex == this.list.length - 1) {
						this.rowIndex = 0;
					} else {
						this.rowIndex++;
					}
				}, time);
			}
		}
	}
</script>
<style lang="scss">
	.xzw_notice {
		font-size: 26upx;
		height: 90upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20upx;
		box-sizing: border-box;
		border-radius: 8rpx;
		// width: 100%;
		// margin-top: 20rpx;
		margin: 20rpx 32rpx 0;
		.notice_left {
			width: 28rpx;
			height: 28rpx;
			margin: 0 20upx 0 0;
		}

		.notice_center {
			flex: 1;
			height: 90upx;

			.swiperIn {
				height: 80upx;
				display: flex;
				align-items: center;
				// color: #FC5351;

				view {
					overflow: hidden;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
				}
			}
		}

		.notice_center2 {
			flex: 1;
			position: relative;
			display: flex;
			align-items: center;
			height: 90upx;
			overflow: hidden;

			view {
				position: absolute;
				white-space: nowrap;
				padding-left: 100%;

				&.fast {
					animation: notice 4s linear infinite both;
				}

				&.normal {
					animation: notice 6s linear infinite both;
				}

				&.slow {
					animation: notice 10s linear infinite both;
				}
			}
		}

		.notice_right {
			margin: 0 0 0 20upx;
		}

		@keyframes notice {
			100% {
				transform: translate3d(-100%, 0, 0);
			}
		}
	}
	
	.buyimg {
		width: 238rpx;
		height: 238rpx;
		position: absolute;
		top: -110rpx;
		left: 36%;
		z-index: 9;
	}
	
	.close {
		width: 36rpx;
		height: 36rpx;
		position: absolute;
		right: 24rpx;
		top: 40rpx;
	}
	
	.pays {
		width: 90%;
		margin: 0 auto;
		height: 96rpx;
		background: #eb5641;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #ffffff;
		line-height: 36rpx;
		text-align: center;
		line-height: 96rpx;
		margin-top: 80rpx;
		margin-bottom: 50rpx;
	}
	
	/deep/ .u-popup__content {
		border-radius: 20rpx 20rpx 0 0;
	}
	
	.buybox {
		.title {
			font-size: 32rpx;
			text-align: center;
			font-weight: 500;
			padding-top: 130rpx;
		}
	
		.content {
			font-size: 28rpx;
			color: #666666;
			margin-top: 50rpx;
			height: 500rpx;
			overflow-y: scroll;
		}
	}
</style>
